import React, { useState } from 'react'
import Modal from './../modal'
import Header from '../../newsComponents/news-header'
import SwitchItem from './../../newsComponents/SwitchItem'
import './index.scss'





function Setting(props) {

  const onClickHandle = (checked) => {
    console.log(checked)
  }



  // 是否展示 modal
  const [showModal, setShowModal] = useState(false)

  const onDelete = (del) => {
    // 是否删除聊天记录, true为删除, false 为不删除
    console.log(del)
    // 关闭modal
    setShowModal(false)
  }


  return (
    <>
      <div className="container">
        <Header props={props} classNames='news_chat_settings_header' title='聊天设置' />

        <div className="content">
          <ul className='chat_setting_person'>
            <li>
              <img src="/images/HeadportraitStu.png" alt="" className='chat_setting_avatar' />
              <div className='chat_setting_info'>
                <strong>高三（9）班班级群</strong>
                <p>绍兴市实验高中-高三（9班）</p>
              </div>
            </li>

            <SwitchItem classNames="chat_setting_item" onClickHandle={onClickHandle} checked={false}>
              聊天置顶
            </SwitchItem>

            <SwitchItem classNames='chat_setting_item' onClickHandle={onClickHandle} checked={false}>
              消息免打扰
            </SwitchItem>
            

            <li className='chat_setting_item' onClick={() => {
              console.log(showModal)
              setShowModal(true)
            }}>
              <strong>清空聊天记录</strong>
              <img src="/images/nextArrow.png" alt="" style={{ width: '0.22rem', height: '0.38rem' }} />
            </li>
          </ul>

          <Modal showModal={showModal} onDelete={onDelete} />

        </div>
      </div>

    </>
  )
}

export default Setting